<template>
  <div class="chart-container">
    <div class="chart-header">
      <div class="chart-controls">
        <!-- <el-select
          v-model="selectedChannel"
          clearable
          placeholder="不限渠道"
          class="channel-select"
          size="small"
        >
          <el-option
            v-for="item in channelOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select> -->
        <!-- <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="date-picker"
          size="small"
        >
        </el-date-picker> -->
      </div>
    </div>
    <div
      :class="className"
      :style="{ height: height, width: width }"
      class="chart"
    />
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts/theme/macarons"; // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
    registerList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
      selectedChannel: "",
      dateRange: [],
      formattedDates: [],
      personalData: [],
      resumeData: [],
      companyData: [],
      jobData: [],
      channelOptions: [
        { id: 1, name: "不限渠道" },
        { id: 2, name: "APP" },
        { id: 3, name: "手机浏览器" },
        { id: 4, name: "微信浏览器" },
        { id: 5, name: "微信小程序" },
        { id: 6, name: "抖音小程序" },
        { id: 7, name: "电脑浏览器" },
        { id: 8, name: "系统" },
      ],
    };
  },
  watch: {
    registerList(newVal, oldVal) {
      if (newVal.length > 0) {
        console.log(newVal);
        this.processData();
        this.initChart();
      }
    },
    selectedChannel() {
      // Update chart data based on selected channel
    },
    dateRange() {
      // Update chart data based on selected date range
    },
  },
  mounted() {
    if (this.registerList.length > 0) {
      this.processData();
      this.initChart();
    }
  },
  methods: {
    processData() {
      // Format dates from timestamps for x-axis
      this.formattedDates = this.registerList[0]
        .map((timestamp) => this.$options.filters.formatDate(timestamp))
        .reverse();

      // Process data for each series
      this.personalData = this.registerList[1]
        ? [...this.registerList[1]].reverse()
        : [];
      this.resumeData = this.registerList[2]
        ? [...this.registerList[2]].reverse()
        : [];
      this.companyData = this.registerList[3]
        ? [...this.registerList[3]].reverse()
        : [];
      this.jobData = this.registerList[4]
        ? [...this.registerList[4]].reverse()
        : [];
    },
    initChart() {
      this.chart = echarts.init(this.$el.querySelector(".chart"));
      this.chart.setOption({
        title: {
          text: "注册量趋势",
          textStyle: {
            color: "#333",
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["个人数", "简历数", "企业数", "职位数"],
          textStyle: {
            color: "#333",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.formattedDates,
          axisLine: {
            lineStyle: {
              color: "#333",
            },
          },
          axisLabel: {
            color: "#333",
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 70,
          axisLine: {
            lineStyle: {
              color: "#333",
            },
          },
          axisLabel: {
            color: "#333",
          },
          splitLine: {
            lineStyle: {
              color: "#eee",
            },
          },
        },
        series: [
          {
            name: "个人数",
            type: "line",
            data: this.personalData,
            itemStyle: { color: "#5470c6" },
          },
          {
            name: "简历数",
            type: "line",
            data: this.resumeData,
            itemStyle: { color: "#ee6666" },
          },
          {
            name: "企业数",
            type: "line",
            data: this.companyData,
            itemStyle: { color: "#3ba272" },
          },
          {
            name: "职位数",
            type: "line",
            data: this.jobData,
            itemStyle: { color: "#fac858" },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  background-color: #fff;
}

.chart-header {
  position: absolute;
  right: 10px;
  top: 15px;
  z-index: 999;
}

.chart-controls {
  display: flex;
  gap: 10px;
}

.channel-select {
  width: 120px;
}

.date-picker {
  width: 260px;
}

.chart {
  height: 400px;
}
</style>
